<template>
  <el-card style="margin-top:8px; margin-left:17px; height:600px; width:100%">
    <el-main style="padding:0px; margin-top:8px;margin-left:17px">
      <el-container>
        <el-header
          style="margin-top:5px; padding:0; width:100%; border-bottom:2px solid #0c4c8e "
          height="35px"
        >
          <span class="table">个人信息</span>
        </el-header>
        <el-main class="mainPane" style="margin-top:5px;width:100%; padding:0">
          <el-form label-width="80px" style="margin-top:30px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="学号">
                  <el-input
                    v-model="studentInfo.studentId"
                    size="small"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input
                    v-model="studentInfo.name"
                    size="small"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="性别">
                  <el-input
                    v-model="studentInfo.male"
                    size="small"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属院系">
                  <el-input
                    v-model="studentInfo.departmentName"
                    size="small"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业">
                  <el-input
                    v-model="studentInfo.majorName"
                    size="small"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年级">
                  <el-input
                    v-model="studentInfo.enrollmentYear"
                    size="small"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="班级">
                  <el-input
                    v-model="studentInfo.className"
                    size="small"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址">
                  <el-input v-model="studentInfo.address" size="small" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式">
                  <el-input v-model="studentInfo.phoneNumber" size="small" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
        <el-footer style="">
          <el-button @click="confirmChange">确认修改</el-button>
        </el-footer>
      </el-container>
    </el-main>
  </el-card>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      studentInfo: {
        // studentId: "12425214",
        // name: "学生1",
        // male: "男",
        // departmentName: "软件学院",
        // majorName: "软件工程",
        // enrollmentYear: "2018级",
        // className: "卓越二班",
        // address: "c10",
        // phoneNumber: "123456789",
      },
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  methods: {
    //返回学生个人信息
    returnSelfInfo() {
      let options = {
        studentId: this.$store.state.id,
        name: null,
        departmentId: null,
        majorId: null,
        enrollmentYear: null,
        className: null,
      };
      this.$http.post(this.$api.StudentSearchInfo, options).then((resp) => {
        if (resp.success) {
          // console.log(resp);
          this.studentInfo = resp.data[0];
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },

    //确认提交
    confirmChange() {
      let options = {
        studentId: this.studentInfo.studentId,
        phoneNumber: this.studentInfo.phoneNumber,
        address: this.studentInfo.address,
      };
      console.log(options);
      this.$http.post(this.$api.StudentUpdateInfo, options).then((resp) => {
        if (resp.success) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          var _this = this;
          setTimeout(
            setTimeout(function() {
              _this.$router.push({
                path: "/student",
              });
            }, 1500)
          );
          // this.$router.push({
          //   path: "/student",
          // });
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
  },
  mounted() {
    this.returnSelfInfo();
  },
};
</script>

<style lang="less" scoped>
.table {
  font-size: 18px;
  color: #666666;
  border-top: 2px solid #0c4c8e;
  border-left: 1px solid #b0b4b8;
  border-right: 1px solid #b0b4b8;
  padding: 10px;
  padding-top: 2px;
  border-radius: 2px;
}

.el-input {
  width: 300px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: black;
  border: 1px solid #8595a6;
  border-radius: 1px;
  background-color: #edeff1;
  padding: 5px;
}

/deep/ .el-input__inner {
  color: black;
  border: 1px solid #8595a6;
  border-radius: 1px;
  background-color: #fff;
  padding: 5px;
}

/deep/ .el-form-item__label {
  margin-right: 20px;
}

.el-card {
  border: 1px solid #6384a4;
}

.el-button {
  background-color: #23384f;
  margin-top: 20px;
  width: 130px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  margin-left: 0px;
}

.el-button :hover {
  color: #5baaf4;
}

.el-button :active {
  color: #5baaf4;
}

/deep/ .el-footer {
  margin-top: 20px;
  margin-left: 50px;
  padding: 0;
}
</style>
